<template>
<div>
    <el-dialog :title="textMap.import" append-to-body :visible.sync="this.dialogFormVisible"
    @close="handleClose">
      <el-form
        ref="dataImport"
        :model="tempImport"
        label-position="left"
        label-width="120px"
        style="width: 400px; margin-left: 50px"
      >
        <el-row
          ><el-col>
            <el-form-item label="父工序" prop="parentId">
              <el-select-tree
                :default-expand-all="defaultExpandAll"
                :multiple="multiple"
                :placeholder="placeholder"
                :disabled="disabled"
                :data="lstAllProcedureSets"
                :props="defaultProps"
                :check-strictly="checkStrictly"
                :clearable="clearable"
                v-model="tempImport.parentId"
                @change="selectChange"
                show-checks
              ></el-select-tree>
            </el-form-item> </el-col
          ><el-col>
            <el-form-item label="工段" prop="workSectionId">
              <el-select
                v-model="tempImport.workSectionId"
                class="filter-item"
                placeholder="请选择工段"
              >
                <el-option
                  v-for="item in this.lstWorksections"
                  :key="item.id"
                  :label="item.workSectionName"
                  :value="item.id"
                />
              </el-select> </el-form-item></el-col
          ><el-col>
            <el-button type="primary" @click="ui_query">
              查询
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <div>
        <el-row>
          <el-table
            v-loading="listLoading"
            :data="listSon"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            row-key="id"
            ref="tableImport"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column align="center" label="工序编号" width="95">
              <template slot-scope="scope">
                {{ scope.row.procedureNo }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="工序名称" width="100">
              <template slot-scope="scope">
                {{ scope.row.procedureName }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="产品类型" width="95">
              <template slot-scope="scope">
                {{ scope.row.productTypeName }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="单价" width="95">
              <template slot-scope="scope">
                {{ scope.row.unitPrice }}
              </template>
            </el-table-column>
             <el-table-column align="center" label="序号" width="95">
              <template slot-scope="scope">
                {{ scope.row.ordered }}
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row>
          <pagination
            v-show="total2 > 0"
            :total="total2"
            :page.sync="listQuery2.page"
            :limit.sync="listQuery2.limit"
            :page-sizes="listQuery2.pageSizes"
            @pagination="fetchDataSon"
          />
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
        <el-button type="primary" @click="ui_import()">
          确定
        </el-button>
      </div>
    </el-dialog>
    <router-view/>
    </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import request from "@/utils/request";
import {
  getAllSon,
  listSon,
  createSon,
  updateSon,
  deleteBatchSon,
  getTableSon,
  getAllSonByRelation
} from "@/api/procedure/mesProcedure";

import {
  getAllRelation,
  getListRelation,
  createRelation,
  createBatchRelation,
  updateRelation,
  deleteBatchRelation,
  getTableRelation as getTableSetFlow
} from "@/api/procedure/product/mesProductProcedureBranchProcedure";

import { getAll as getAllWorksections } from "@/api/mesWorkSection";
import ElSelectTree from "el-select-tree";
import { getTable } from "@/api/procedure/mesProcedureSet";

export default {
  name: "mesprocedureimportchild",
  components: { Pagination, ElSelectTree },
  data() {
    return {
      listSon: [],
      listLoading: true,
      total2: 0,
      listQuery2: {
        page: 1,
        limit: 20,
        pageSizes: [20, 40, 60]
      },
      curMesProductProcedureBranchId: 0,
      dialogFormVisible: false,
      dialogStatusSon: "",
      tempImport: {
        workSectionId: 0,
        parentId: -1
      },
      //表格變量
      lstSelected: [],
      lstProcedureSetIds: [],
      lstWorksections: [],
      lstAllProcedureSets: [],
      displayTree: false,
      clearable: true,
      defaultExpandAll: true,
      multiple: false,
      placeholder: "请选择",
      disabled: false,
      checkStrictly: true,
      defaultProps: {
        value: "id",
        children: "children",
        label: "procedureSetName"
      },
      textMap: {
        update: "编辑",
        create: "创建",
        import: "导入"
      },
      appendToBody:true,
      temp: {}
    };
  },
  props: {
    mesproductprocedurebranchid: {},
    mesprocedures: {},
    dialogVisible:false
    
  },
  watch: {
    mesproductprocedurebranchid: function(newVale, oldValue) {
      if (newVale != null) {
        this.curMesProductProcedureBranchId = newVale;
      }
    },
    dialogVisible: function(newVale,oldValue)
    {
       
       if(newVale !=null)
       {
          this.dialogFormVisible = newVale
       }
    },
    deep: true
  },
  created() {
    this.fetchData()
    this.fetchDataSon();
    this.getAllWorkSections();
    this.getAllMesProcedureSetIds();
    this.resetTempImport()
  },
  
  methods: {
    fetchData() {
      //获取全部的工序组
      this.listLoading = true;
      getTable({}).then(response => {
        this.lstAllProcedureSets = response.data.children;
        this.listLoading = false;
      });
    },
    fetchDataSon() {
      let param = {
        page: this.listQuery2.page,
        size: this.listQuery2.limit,
        parentId: this.tempImport.parentId,
        workSectionId: this.tempImport.workSectionId
      };
      this.listLoading = true;
      getAllSonByRelation(param).then(response => {
        this.listSon = response.data.records;
        this.total2 = response.data.total;
        this.listLoading = false;
        //通知父组件刷新
        //this.$emit("refreshSteps", this.listSon);
      });
    },
    ui_import() {
      let selecteds = this.$refs.tableImport.selection;
      let params = [];
      if (selecteds == null || selecteds.length == 0) {
        this.$message.error("请选择要导入的工序");
        return;
      }
      params = params.concat(
        selecteds.map(itm => {
          return {
            id: 0,
            ProcedureId: itm.id,
            productprocedureBranchId: this.curMesProductProcedureBranchId,
          };
        })
      );
      createBatchRelation(params).then(() => {
        this.fetchDataSon();
        this.dialogFormVisible = false;
        this.$notify({
          title: "Success",
          message: "导入成功！",
          type: "success",
          duration: 2000
        });
        //刷新父组件
        this.$emit("refresh", this.listQuery2)
      });
    },
    getAllMesProcedureSetIds() {
      this.lstProcedureSetIds.length = 0;
      this.lstProcedureSetIds.push({ id: 0, name: "请选择" });
      //  this.getJosn(this.list)
      getTable({}).then(response => {
        this.getJosn(response.data.children);
      });
    },
    getJosn(arr) {
      if (arr != null && arr.length > 0) {
        arr.forEach(itm => {
          if (itm != null && itm instanceof Object) {
            this.lstProcedureSetIds.push({
              id: itm.id,
              name: itm.ProcedureSetName
            });
            if (itm.children != null && itm.children.length > 0)
              this.getJosn(itm.children);
          }
        });
      }
    },
    getAllWorkSections() {
      this.lstWorksections.length = 0;
      this.lstWorksections.push({ id: 0, workSectionName: "请选择" });
      getAllWorksections({}).then(response => {
        let r = response.data.map(itm => {
          return { id: itm.id, workSectionName: itm.workSectionName };
        });
        this.lstWorksections = this.lstWorksections.concat(r);
      });
    },
    resetTempImport() {
      this.tempImport = {
        workSectionId: 0,
        parentId: 0
      };
    },
    ui_query() {
      this.fetchDataSon();
    },
    selectChange() {},
    handleSelectionChangeSon(val) {
      if (val == null || val.length == 0) return;
      let cur = this.listSon.find(v => v.id == val[0].id);
      if (cur != null) {
        this.temp = Object.assign({}, cur);
      }
    },
    handleClose()
    {
        this.dialogFormVisible = false
        this.$emit("childClose",this.dialogFormVisible)
    }
  }
};
</script>
<style>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
